<!--
 * @Author: your name
 * @Date: 2021-12-29 17:38:11
 * @LastEditTime: 2022-01-07 08:20:53
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \my-site\src\components\menu\index.vue
-->
<template>
  <div class="menu-container">
      <RouterLink :exact="item.exact" :to="{name : item.name}" class="item" v-for="(item) in menuData" :key="item.href"> <!-- 是否有选中样式取决于location.pathname和type的匹配性 -->
          <Icon :type="item.type"/>
          <p>{{item.text}}</p>
      </RouterLink>
  </div>
</template>

<script>
import Icon from '@/components/icon'
export default {
    components:{
        Icon,
    },
    data(){
        return {
            menuData:[ //menu页数据，通过v-for循环生成menu页结构
                {name:"Home", exact:true, href:"/", type:"home", text:"首页"},
                {name:"Blog", exact:false, href:"/article", type:"blog", text:"文章"}, //startsWith:true文章页模糊匹配
                {name:"About", exact:true, href:"/about", type:"about", text:"关于我"},
                {name:"Project", exact:true, href:"/project", type:"code", text:"项目&效果"},
                {name:"Message", exact:true, href:"/message", type:"chat", text:"留言板"},
            ]
        }
    },
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
    .menu-container{
        font-size:14px;
        color:@gray;
        width:100%;
        margin:20px 0;
        .item{
            display:flex;
            &.router-link-active{
                color:#eee;
                background-color:darken(@gray, 60%);
                p{
                    font-size:18px;
                }
                .icon-container{
                    font-size:30px;
                }
            }
            &:hover{
                color:#eee;
                background-color:darken(@gray, 60%);
                p{
                    font-size:18px;
                }
                .icon-container{
                    font-size:30px;
                }
            }
            padding-left:27px;
            position:relative;
            height:60px;
            align-items:center;
            display:flex;
            text-decoration:none;
            color:@gray;
            p{
                margin-left:7px;
            }
            .icon-container{
                font-size:25px;
            }
        }
    }
</style>